.progressbar {
border-width: 1px;
border-style: solid;
- border-radius: 3px;
+ border-radius: 1.5px;
border-color: $selected_borders_color;
background-color: $selected_bg_color;
- $_shadow: if($variant=='light', transparentize(black,0.7),
+ $_shadow: if($variant=='light', transparentize(black,0.75),
transparentize(black,0.9));
box-shadow: 1px 0 $_shadow, -1px 0 $_shadow;
- &.left { box-shadow: 1px 0 $_shadow; }
- &.right { box-shadow: -1px 0 $_shadow; }
- &.left.right { box-shadow: none; }
+ &.left {
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ box-shadow: 1px 0 $_shadow;
+ }
+ &.right {
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ box-shadow: -1px 0 $_shadow;
+ }
+ &.left.right {
+ box-shadow: none;
+ }
&.vertical {
box-shadow: 0 1px $_shadow;
- &.bottom { box-shadow: none; }
+ &.bottom {
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
+ box-shadow: none;
+ }
+ &.top {
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ }
}
// box-shadow: inset 1px 1px transparentize($borders_edge,0.8);
&:backdrop {
.progressbar {
border-width: 1px;
border-style: solid;
- border-radius: 3px;
+ border-radius: 1.5px;
border-color: #0f2b48;
background-color: #215d9c;
box-shadow: 1px 0 rgba(0, 0, 0, 0.1), -1px 0 rgba(0, 0, 0, 0.1); }
.progressbar.left {
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
box-shadow: 1px 0 rgba(0, 0, 0, 0.1); }
.progressbar.right {
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
box-shadow: -1px 0 rgba(0, 0, 0, 0.1); }
.progressbar.left.right {
box-shadow: none; }
.progressbar.vertical {
box-shadow: 0 1px rgba(0, 0, 0, 0.1); }
.progressbar.vertical.bottom {
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
box-shadow: none; }
+ .progressbar.vertical.top {
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px; }
.progressbar:backdrop {
border-color: #0f2b48;
background-color: #215d9c;
.progressbar {
border-width: 1px;
border-style: solid;
- border-radius: 3px;
+ border-radius: 1.5px;
border-color: #184472;
background-color: #4a90d9;
- box-shadow: 1px 0 rgba(0, 0, 0, 0.3), -1px 0 rgba(0, 0, 0, 0.3); }
+ box-shadow: 1px 0 rgba(0, 0, 0, 0.25), -1px 0 rgba(0, 0, 0, 0.25); }
.progressbar.left {
- box-shadow: 1px 0 rgba(0, 0, 0, 0.3); }
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ box-shadow: 1px 0 rgba(0, 0, 0, 0.25); }
.progressbar.right {
- box-shadow: -1px 0 rgba(0, 0, 0, 0.3); }
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ box-shadow: -1px 0 rgba(0, 0, 0, 0.25); }
.progressbar.left.right {
box-shadow: none; }
.progressbar.vertical {
- box-shadow: 0 1px rgba(0, 0, 0, 0.3); }
+ box-shadow: 0 1px rgba(0, 0, 0, 0.25); }
.progressbar.vertical.bottom {
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
box-shadow: none; }
+ .progressbar.vertical.top {
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px; }
.progressbar:backdrop {
border-color: #4a90d9;
background-color: #4a90d9;